<template>
  <!-- vue3页面 -->
  <section>
    <a-row style="margin-bottom: 20px">
      <a-col span="7">
        <a-col>
          <div class="bar HeaderBordr setEchart" style="margin-bottom: 20px">
            <div style="width: 100%; height: 310px">
              <MyEchart
                :options="proposalCountOptions"
                ref="proposalCountRef"
              />
            </div>
            <div class="footerBorder footer setEchart"></div>
          </div>
          <div class="bar HeaderBordr setEchart" style="margin-bottom: 20px">
            <div style="width: 100%; height: 310px">
              <MyEchart
                :options="proposalSatisfactionOption"
                ref="proposalSatisfactionRef"
              />
            </div>
            <div class="footerBorder footer setEchart"></div>
          </div>
          <div class="bar HeaderBordr setEchart" style="margin-bottom: 20px">
            <div style="width: 100%; height: 310px">
              <MyEchart
                :options="representativeSexOption"
                ref="representativeSexRef"
              />
            </div>
            <div class="footerBorder footer setEchart"></div>
          </div>
        </a-col>
      </a-col>
      <a-col span="10" style="padding: 0 10px">
        <div class="number-card">
          <div class="number-text">
            <div class="number">66666</div>
            <div class="name">代表团数量</div>
          </div>
          <div class="number-text">
            <div class="number">9999</div>
            <div class="name">代表数量</div>
          </div>
          <div class="number-text">
            <div class="number">1231</div>
            <div class="name">青年代表数量</div>
          </div>
          <div class="number-text">
            <div class="number">111</div>
            <div class="name">少数民族代表数量</div>
          </div>
        </div>
        <div class="content">
          <img src="../../assets/echart/big.png" class="big" alt="" />
          <div class="cicle1"></div>
          <main class="mian">
            <div class="mianBox">
              <div class="item 1">
                <div style="color: #4b7efe">最新提案</div>
                <div class="title_2" style="color: #2db7f5">
                  建议学校加强1号门和3号门的共享单车管理大武当客家话江口街道好哇车管理大武当客家话江口街道好哇
                </div>
                <div class="data">
                  <span style="color: #4b7efe"
                    >发起人与时间：<i style="color: #2db7f5">陈德龙</i></span
                  ><span>2023-11-13</span>
                </div>
              </div>
              <div class="item 2">
                <div style="color: #4b7efe">最新精选留言</div>
                <div class="title_2" style="color: #2db7f5; text-indent: 0em">
                  留言：您好，请问往年的北京统计年鉴该怎么查看呢？
                </div>
                <div class="title_2" style="color: #2db7f5; text-indent: 0em">
                  回复：您好，感谢您对北京统计的关注。请您登录北京统计官网，在统计数据>统计年鉴栏目中，可查看历年北京统计年鉴。具体网址如下：http://tjj.beijing.gov.cn/tjsj_31433/您也可以拨打北京市统计局政府信息公开咨询电话4006507003转1，进行咨询。再次对您的来询表示感谢。
                </div>
                <div class="data">
                  <span style="color: #4b7efe"
                    >发起人与时间：<i style="color: #2db7f5">陈德龙</i></span
                  ><span>2023-11-13</span>
                </div>
              </div>
              <div class="item 3">
                <div style="color: #4b7efe">最新来信</div>
                <div class="title_2" style="color: #2db7f5; text-indent: 0em">
                  标题：关于中秋节福利的建议
                </div>
                <div class="title_2" style="color: #2db7f5; text-indent: 0em">
                  内容：建议不要发五仁月饼
                </div>
                <div class="data">
                  <span style="color: #4b7efe"
                    >发起人与时间：<i style="color: #2db7f5">陈德龙</i></span
                  ><span>2023-11-13</span>
                </div>
              </div>
              <div class="item 4">
                <div style="color: #4b7efe">最新活动</div>
                <div class="title_2" style="color: #2db7f5; text-indent: 0em">
                  名称：教职工健步走活动
                </div>
                <div class="title_2" style="color: #2db7f5; text-indent: 0em">
                  介绍：健步走是一项简单易行，见效快，花费少，适合广大群众特别是老年朋友参与的大众体育健身项目，深受我市广大老年朋友的喜爱。
                </div>
                <div class="data">
                  <span style="color: #4b7efe">活动时间：</span
                  ><span>2023-11-13</span>至
                  <span>2023-11-16</span>
                </div>
              </div>
              <div class="item 5">
                <div style="color: #4b7efe">最新福利</div>
                <div class="title_2" style="color: #2db7f5; text-indent: 0em">
                  名称：2024年元旦福利发放
                </div>
                <div class="title_2" style="color: #2db7f5; text-indent: 0em">
                  发放地点：学校活动中心二楼205办公室
                </div>
                <div class="data">
                  <span style="color: #4b7efe; text-align: center"
                    >2023-11-10 17:59:35至2023-11-30 17:59:39</span
                  >
                </div>
              </div>
              <div class="item 6">
                <div style="color: #4b7efe">敬请期待</div>
                <div class="title_2" style="color: #2db7f5; text-indent: 0em">
                  名称：敬请期待
                </div>
                <div class="title_2" style="color: #2db7f5; text-indent: 0em">
                  内容：敬请期待
                </div>
              </div>
            </div>
          </main>
        </div>
      </a-col>
      <a-col span="7">
        <a-col>
          <div class="bar HeaderBordr setEchart" style="margin-bottom: 20px">
            <div style="width: 100%; height: 310px">
              <MyEchart :options="registerCountOption" ref="registerCountRef" />
            </div>
            <div class="footerBorder footer setEchart"></div>
          </div>
          <div class="bar HeaderBordr setEchart" style="margin-bottom: 20px">
            <div style="width: 100%; height: 310px">
              <MyEchart
                :options="proposalTypeCountOption"
                ref="proposalTypeCountRef"
              />
            </div>
            <div class="footerBorder footer setEchart"></div>
          </div>
          <div class="bar HeaderBordr setEchart" style="margin-bottom: 20px">
            <div style="display: flex">
              <div class="rullData">
                <div class="rullData_title">热门代表团</div>
                <div class="list-tab">
                  <div style="width: 80px; margin-right: 50px">代表团名称</div>
                  <div style="margin-right: auto">人数</div>
                  <div style="width: 70px">团长姓名</div>
                </div>
                <div class="container" ref="rollBox">
                  <ul class="list" ref="roll">
                    <li class="list_item" ref="item" v-for="i in 10">
                      <div style="width: 80px">{{ `第${i}代表团` }}</div>
                      <div style="margin-right: auto; margin-left: 50px">
                        {{ `${i * 10}人` }}
                      </div>
                      <div style="width: 70px">陈德龙</div>
                    </li>
                    <li class="list_item" ref="item" v-for="i in 10">
                      <div style="width: 80px">{{ `第${i}代表团` }}</div>
                      <div style="margin-right: auto; margin-left: 50px">
                        {{ `${i * 10}人` }}
                      </div>
                      <div style="width: 70px">陈德龙</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="footerBorder footer setEchart"></div>
          </div>
        </a-col>
      </a-col>
    </a-row>
  </section>
  <div class="box"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, shallowRef, onUnmounted } from "vue";
// import MyMessage from "./components/message.vue";
import MyEchart from "./echart.vue";
import { getProposalCountOption } from "./democracyOptions/proposalCount";
import { getRegisterCountOption } from "./democracyOptions/registerCount";
import { getProposalTypeCountOption } from "./democracyOptions/proposalTypeCount";
import { getProposalSatisfactionOption } from "./democracyOptions/proposalSatisfaction";
import { getRepresentativeSexOption } from "./democracyOptions/representativeSex";

const proposalCountOptions = ref();
const registerCountOption = ref();
const proposalTypeCountOption = ref();
const proposalSatisfactionOption = ref();
const representativeSexOption = ref();

/** echarts图表的ref */
const proposalCountRef = ref();
const registerCountRef = ref();
const proposalTypeCountRef = ref();
const proposalSatisfactionRef = ref();
const representativeSexRef = shallowRef();

onMounted(() => {
  proposalCountOptions.value = getProposalCountOption();
  registerCountOption.value = getRegisterCountOption();
  proposalTypeCountOption.value = getProposalTypeCountOption(
    type.map(i => i.itemText)
  );
  proposalSatisfactionOption.value = getProposalSatisfactionOption();
  representativeSexOption.value = getRepresentativeSexOption();

  window.addEventListener("resize", onResize);
});

const type = [
  {
    id: "1699653426454528001",
    dictId: "1698660396616450049",
    itemText: "改革发展",
    itemValue: "改革发展",
    description: null,
    sortOrder: 1,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:18:50",
    updateBy: null,
    updateTime: null,
    status_dictText: "启用",
  },
  {
    id: "1699653477641814017",
    dictId: "1698660396616450049",
    itemText: "教学科研",
    itemValue: "教学科研",
    description: null,
    sortOrder: 2,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:19:02",
    updateBy: null,
    updateTime: null,
    status_dictText: "启用",
  },
  {
    id: "1699653529500188674",
    dictId: "1698660396616450049",
    itemText: "人才队伍",
    itemValue: "人才队伍",
    description: null,
    sortOrder: 3,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:19:14",
    updateBy: "thinksoft",
    updateTime: "2023-09-07 13:19:37",
    status_dictText: "启用",
  },
  {
    id: "1699653589172551682",
    dictId: "1698660396616450049",
    itemText: "薪酬分配",
    itemValue: "薪酬分配",
    description: null,
    sortOrder: 4,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:19:28",
    updateBy: null,
    updateTime: null,
    status_dictText: "启用",
  },
  {
    id: "1699653675432607745",
    dictId: "1698660396616450049",
    itemText: "管理服务",
    itemValue: "管理服务",
    description: null,
    sortOrder: 5,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:19:49",
    updateBy: null,
    updateTime: null,
    status_dictText: "启用",
  },
  {
    id: "1699653728633159682",
    dictId: "1698660396616450049",
    itemText: "民生福利",
    itemValue: "民生福利",
    description: null,
    sortOrder: 6,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:20:02",
    updateBy: null,
    updateTime: null,
    status_dictText: "启用",
  },
  {
    id: "1699653802788454401",
    dictId: "1698660396616450049",
    itemText: "规章制度",
    itemValue: "规章制度",
    description: null,
    sortOrder: 7,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:20:19",
    updateBy: null,
    updateTime: null,
    status_dictText: "启用",
  },
  {
    id: "1699653865010954241",
    dictId: "1698660396616450049",
    itemText: "条件保障",
    itemValue: "条件保障",
    description: null,
    sortOrder: 8,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:20:34",
    updateBy: null,
    updateTime: null,
    status_dictText: "启用",
  },
  {
    id: "1699653912083628034",
    dictId: "1698660396616450049",
    itemText: "校园文化",
    itemValue: "校园文化",
    description: null,
    sortOrder: 9,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:20:45",
    updateBy: null,
    updateTime: null,
    status_dictText: "启用",
  },
  {
    id: "1699654045185671170",
    dictId: "1698660396616450049",
    itemText: "党建工作",
    itemValue: "党建工作",
    description: null,
    sortOrder: 10,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:21:17",
    updateBy: null,
    updateTime: null,
    status_dictText: "启用",
  },
];

const onResize = () => {
  proposalCountRef.value.resize();
  registerCountRef.value.resize();
  proposalTypeCountRef.value.resize();
  proposalSatisfactionRef.value.resize();
  representativeSexRef.value.resize();
};

onUnmounted(() => {
  window.removeEventListener("resize", onResize);
});
</script>

<style scoped lang="less">
@font-face {
  font-family: "number";
  src: url("../../assets/echart/number.ttf");
}
section {
  padding: 0 10px;
  color: #fff;
}
.bar {
  position: relative;
  width: 100%;
  height: 310px;
  background: url("../../assets/echart/line.png") repeat;
  border: 1px solid rgba(25, 186, 139, 0.17);
  .title {
    color: white;
    font-size: 16px;
    padding: 10px 0 0 40px;
  }
}
.HeaderBordr::before {
  top: 0;
  left: 0;
  border-left: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
}
.HeaderBordr::after {
  top: 0;
  right: 0;
  border-right: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
}
.footerBorder::after {
  top: 0;
  right: 0;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
}
.footerBorder::before {
  top: 0;
  left: 0;
  border-left: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
}
.borderP::before,
.borderP::after {
  position: absolute;
  width: 30px;
  height: 10px;
  content: "";
}
.border::after {
  left: 0;
  top: 0;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.title::before {
  bottom: 0;
  right: 0;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
}

.setEchart::before,
.setEchart::after {
  position: absolute;
  width: 10px;
  height: 10px;
  content: "";
}
.footer {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 10px;
}

.number-card {
  display: flex;
  margin-top: 20px;
  justify-content: space-around;
  .number-text:nth-child(1) {
    color: #ffadd2;
  }
  .number-text:nth-child(2) {
    color: #2db7f5;
  }
  .number-text:nth-child(3) {
    color: #87d068;
  }
  .number-text:nth-child(4) {
    color: #108ee9;
  }
  .number-text {
    padding-top: 35px;
    width: 180px;
    height: 207px;
    background: url("../../assets/echart/count1.png") no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    .number {
      height: 45%;
      font-family: "number";
      padding-top: 10px;
      font-size: 40px;
    }
    .name {
      font-size: 16px;
    }
  }
}
.content {
  z-index: 2;
  position: relative;
  width: 130%;
  margin-top: 160px;
  min-height: 453px;
  transform: translateX(-50%);
  margin-left: 50%;
  .mianBox {
    position: absolute;
    top: -20px;
    left: 50%;
    width: 100%;
    transform-style: preserve-3d;
    transition: all 1s;
    margin: 5% auto;
    animation: carouselrotate 25s infinite linear;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mianBox:hover {
    animation-play-state: paused;
  }

  .main {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
  }
  .item {
    font-size: 14px;
    position: absolute;
    width: 270px;
    height: 150px;
    padding: 5px;
    border-radius: 10px;
    animation: 20s yuan infinite linear;
    background: url("../../assets/echart/line.png") repeat;
    border: 1px solid rgba(25, 186, 139, 0.17);
    background-color: rgba(0, 0, 0, 0.2);
    transition: all 0.6s;
    cursor: pointer;
    &:hover {
      z-index: 999;
      background-color: rgba(0, 0, 0, 0.8);
    }
    .title_2 {
      text-indent: 2em;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .data {
      font-size: 12px;
      margin-top: 10px;
      display: flex;
      color: #2db7f5;
      justify-content: space-between;
      i {
        font-style: normal;
      }
    }
  }
  .big {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: all 0.4s;
    cursor: pointer;
    &:hover {
      opacity: 1;
    }
  }
  .cicle1 {
    transform-style: preserve-3d;
    position: absolute;
    top: 40px;
    left: 0px;
    width: 100%;
    height: 680px;
    background: url(../../assets/echart/circle.png) no-repeat center;
    background-size: contain;
    transform: rotateX(70deg);
    animation: circle 10s linear infinite;
  }
}
.item:nth-child(1) {
  transform: rotateY(0deg) translateZ(288px);
  // background-color: #ffa39e;
}
.item:nth-child(2) {
  transform: rotateY(60deg) translateZ(288px);
  // background-color: #ffd591;
}
.item:nth-child(3) {
  transform: rotateY(120deg) translateZ(288px);
  // background-color: #b7eb8f;
}
.item:nth-child(4) {
  transform: rotateY(180deg) translateZ(288px);
  // background-color: #87e8de;
}
.item:nth-child(5) {
  transform: rotateY(240deg) translateZ(288px);
  // background-color: #91d5ff;
}
.item:nth-child(6) {
  transform: rotateY(300deg) translateZ(288px);
  // background-color: #d3adf7;
}
.rullData {
  z-index: 3;
  position: relative;
  width: 100%;
  height: 310px;
  background-size: cover;
  border: 1px solid rgba(75, 126, 254, 0.3);
  background-color: rgba(0, 0, 0, 0.2);
  background-image: url("../../assets/echart/line.png") repeat;
  background-repeat: no-repeat;
  background-size: contain;
  .rullData_title {
    width: 100%;
    height: 30px;
    font-size: 16px;
    padding-left: 20px;
    line-height: 30px;
    font-weight: bold;
    color: #88aaf3;
    background: url("../../assets/echart/Hometitlebg.png") no-repeat;
  }
  .list-tab {
    height: 25px;
    line-height: 25px;
    display: flex;
    padding: 0 20px;
    justify-content: space-around;
    color: #68d8fe;
    z-index: 3;
    background-color: rgba(255, 255, 255, 0.1);
  }
  .container {
    height: 255px;
    width: 100%;
    overflow: hidden;
    .list {
      padding: 0;
      animation: move 6s infinite linear;
      &:hover {
        animation-play-state: paused;
      }
    }
  }
  .list_item {
    z-index: 3;
    display: flex;
    padding: 0 20px;
    justify-content: space-around;
    width: 100%;
    /* 滚动的项目需要有具体的高度 */
    height: 30px;
    line-height: 30px;
    color: #61a8ff;
    list-style: none;
    font-size: 12px;
    transition: all 0.3s;
    cursor: pointer;
    &:hover {
      color: #68d8ff;
      background: rgba(255, 255, 255, 0.2);
    }
  }
}
@keyframes circle {
  0% {
    transform: rotateX(70deg) rotateZ(0);
  }
  100% {
    transform: rotateX(70deg) rotateZ(360deg);
  }
}

@keyframes carouselrotate {
  from {
    transform: translateX(-50%) rotateX(-3deg) rotateY(0deg);
  }
  to {
    transform: translateX(-50%) rotateX(-3deg) rotateY(-360deg);
  }
}

@keyframes move {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -50%, 0);
  }
}
</style>
